<template>
  <div class="show-container">
    <div class="song-list" v-if="songs.length > 0">
      <!-- <div class="song-item title">
        <a-row  :gutter="24">
        <a-col :span="3">歌手 </a-col>
        <a-col :span="3"> </a-col>
        <a-col :span="12">歌曲</a-col>
        <a-col :span="6">mv</a-col>
      </a-row>
      </div> -->
      <div v-for="(item, index) in songs" :key="index" class="song-item">
        <a-row>
          <a-col :span="3">
            <a-avatar
                :src="getSingerPic(item ? item.song.pic : '')"
                class="singer-avator"
            >
              <template v-if="!item?.song.pic" #icon>
                <UserOutlined/>
              </template>
            </a-avatar>
          </a-col>
          <a-col :span="5" class="icon-cont">
            <svg
                t="1664352187864"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5713"
                width="20"
                height="20"
                @click="toPlaySong(index,item)"
            >
              <path
                  d="M512 42.666667C252.793333 42.666667 42.666667 252.793333 42.666667 512s210.126667 469.333333 469.333333 469.333333 469.333333-210.126667 469.333333-469.333333S771.206667 42.666667 512 42.666667z m0 896c-235.64 0-426.666667-191.026667-426.666667-426.666667s191.026667-426.666667 426.666667-426.666667 426.666667 191.026667 426.666667 426.666667-191.026667 426.666667-426.666667 426.666667z m-74.666667-213.38a53.373333 53.373333 0 0 1-53.333333-53.333334V352.066667A53.333333 53.333333 0 0 1 467.373333 308L702 467.933333a53.333333 53.333333 0 0 1 0 88.133334L467.373333 716a53.286667 53.286667 0 0 1-30.04 9.286667z m0.08-383.933334a11.093333 11.093333 0 0 0-5.08 1.28 10.446667 10.446667 0 0 0-5.666666 9.433334v319.866666a10.666667 10.666667 0 0 0 16.666666 8.82l234.666667-159.94a10.666667 10.666667 0 0 0 0-17.626666l-234.666667-159.933334a10.313333 10.313333 0 0 0-5.906666-1.92z"
                  fill="#cdcdcd"
                  p-id="5714"
              ></path>
            </svg>
            <img
                v-if="item.collected === true"
                src="~@/assets/image/song/collected.png"
                alt="无法加载图片"
                width="20px"
                height="20px"
                @click="toCollect(item)"
            />
            <img
                v-else
                src="../../assets/image/song/bCollect.png"
                alt="无法加载图片"
                width="20px"
                height="20px"
                @click="toCollect(item)"
            />
          </a-col>
          <a-col :span="13">{{ item.song.name }}</a-col>
          <a-col :span="2" class="right-txt">{{
              item.song?.mv ? "播放" : "暂无"
            }}
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import {
//   reactive,
//   toRefs,
//   ref,
//   computed,
//   onMounted,
//   defineAsyncComponent,
//   shallowRef,
//   useAttrs,
// } from "vue";
import {message} from "ant-design-vue";
import type {songCollectType} from "@/types/pageTypes/songs.ts";
import usePlayer from "@/views/player/config/player.ts"

const {getSongDetail} = usePlayer()
import {collectSong} from "@/api/api.ts";
import useStore from "@/pinia/index.ts";

const {user, songStore} = useStore();
const getSingerPic = (pic: string | undefined): string => {
  return import.meta.env.VITE_APP_BASE_SERVER + pic;
};
const {songs} = defineProps({
  songs: {
    type: Array<songCollectType>,
    default: () => [],
  },
});

const toPlaySong = async (index: number, item: songCollectType) => {
  console.log(index, item)
  let currentIndex: number = songStore.songPlayList.length + index
  songStore.setSongPlayIndex(currentIndex)
  songStore.songPlayList = songStore.songPlayList.concat(songs)
  songStore.setSongPlayList(songStore.songPlayList)
  let currentSong = songStore.songPlayList[currentIndex]
  if (currentSong.song.id) {
    await getSongDetail(currentSong.song.id)
    // toPlay()
  }
}

const toCollect = (item: songCollectType): void => {
  if (user.userInfo?.id) {
    collectSong(user.userInfo.id, item.song.id)
        .then((res) => {
          if (res.code === 200) {
            if (item.collected) {
              message.success("取消收藏成功");
            } else {
              message.success("收藏成功");
            }

            item.collected = !item.collected;
          } else {
            message.error("收藏失败");
          }
        })
        .catch(() => {
          message.error("系统繁忙请稍后再试");
        });
  } else {
    message.warning("请先登录");
  }
};
</script>

<style scoped lang="less">
.show-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .song-list {
    flex: 1;
    overflow-y: auto;

    .song-item {
      margin-bottom: 5px;
      line-height: 32px;

      padding: 0 12px;

      .left-txt {
        text-align: left;
      }

      .right-txt {
        text-align: right;
      }

      .icon-cont {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .icon {
          cursor: pointer;
        }
      }
    }

    .title {
      font-size: 12px;
    }
  }
}
</style>
